<template>
    <div class="container">
        仅显示近两百条订单数据
        <div class="cards" style="width: 100%;margin: 20px 0;">
            <el-card v-for="item in orders" :key="item.id" class="box-card" shadow="hover">
                <template #header>
                    <div class="card-header" style="display: flex;">
                        <span>订单号：{{ item.id }}</span>
                        <div style="flex: 1;">
                        </div>
                        <!-- <el-button class="button" text>Operation button</el-button> -->
                        <div>下单时间：{{ item.createTime }}</div>
                    </div>
                </template>
                <div class="oreder_text">
                    <div>
                        订单状态：
                        <el-button v-show="item.state === '预订'" size="large" type="primary" class="button" text
                            style="cursor: default;">预定中</el-button>
                            <el-button v-show="item.state === '入住'" size="large" type="warning" class="button" text
                            style="cursor: default;">入住中</el-button>
                        <el-button v-show="item.state === '完成'" size="large" type="success" class="button" text
                            style="cursor: default;">已完成</el-button>
                        <el-button v-show="item.state === '取消'" size="large" type="info" class="button" text
                            style="cursor: default;">已取消</el-button>
                    </div>
                    <div>姓名：{{ item.username }}</div>
                    <div>手机号：{{ item.phone }}</div>
                    <div>入住时间：{{ item.startDate }}&nbsp; - &nbsp;{{ item.endDate }}</div>
                    <!-- <div>下单时间：{{ item.createTime }}</div> -->
                    <div>房间号：{{ item.roomCode }}</div>
                    <div>订单备注：{{ item.userRemark }}</div>
                    <div style="display: flex;width: 100%;">
                        <div> 总金额：<span style="font-size: 30px;color: red;">￥{{ item.total }}</span></div>
                        <div style="flex: 1;"></div>
                        <div>
                            <el-popconfirm title="确定取消预订吗？" @confirm="handleDelete(item.id)" @cancel="handleCancel()">
                                <template #reference>
                                    <el-button v-show="item.state === '预订'" size="large" type="danger">取消预订</el-button>
                                </template>
                            </el-popconfirm>

                            <el-button v-show="item.state === '完成' && item.rate == 0" @click="openRate(item.id)"
                                size="large" type="success">评分</el-button>

                            <el-button v-show="item.rate > 0" @click="lookComment(item)" size="large" type="info" class="button"
                                text>查看评价</el-button>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 评分弹窗 -->
        <el-dialog v-model="dialogVisible" title="评分" width="30%">
            <el-form :model="rateForm" label-width="120px">
                <el-form-item label="评分：">
                    <el-rate v-model="rateForm.rate" />
                </el-form-item>
                <el-form-item label="评价：">
                    <el-input type="textarea" v-model="rateForm.comment" style="width: 80%"
                        placeholder="评价内容"></el-input>
                </el-form-item>

            </el-form>

            <!-- <el-input v-model="rateForm.id"></el-input>
            <el-input v-model="rateForm.rate"></el-input> -->
            <template #footer="target">
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleRate(), dialogVisible = false">确认</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 查看评价弹窗 -->
        <el-dialog v-model="commentDialog" title="您的评价" width="30%">
            <el-form :model="commentForm" label-width="120px">
                <el-form-item label="评分：">
                    <el-rate disabled v-model="commentForm.rate" />
                </el-form-item>
                <el-form-item label="评价：">
                    <el-input disabled type="textarea" v-model="commentForm.comment" style="width: 80%"
                        placeholder="评价内容"></el-input>
                </el-form-item>

            </el-form>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "@vue/reactivity";
import request from '@/utils/request';
import { ElMessage } from "element-plus";
import { onMounted } from '@vue/runtime-core';
import { tr } from "element-plus/es/locale";
onMounted(() => {
    load()
})
// 加载
const loading = ref(true)
// 订单列表初始化
const orders = ref()
const load = () => {
    request.get('/h/order/getUserOrders').then((res: any) => {
        if (res.code === '200') {
            orders.value = res.data.records
            loading.value = false
        } else {
            ElMessage.error(res.msg)
        }

    })
}
// 取消预订
const handleDelete = (id: number) => {
    // console.log(id);

    request.delete('/h/order/' + id).then(res => {
        ElMessage.success("取消成功")
        load()
    }).catch(err => {
        ElMessage.error('取消失败')
    })
}
const handleCancel = () => {
    ElMessage.error('取消操作')
}
// 评分弹窗
const rate = ref()
const dialogVisible = ref(false)
const rateForm = ref()
const openRate = (id: any) => {
    rateForm.value = {}
    rateForm.value.id = id
    dialogVisible.value = true
}
const handleRate = () => {
    request.post('/h/order/comment', null, {
        params: {
            id: rateForm.value.id,
            rate: rateForm.value.rate,
            comment: rateForm.value.comment,
        }
    }).then((res: any) => {
        if (res.code === '200') {
            ElMessage.success('评价成功')
            dialogVisible.value = false
        } else {
            ElMessage.error(res.msg)
        }
    })
}
//查看评价
const commentForm = ref()
const commentDialog = ref(false)
const lookComment = (item :any) => {
    commentForm.value = item
    commentDialog.value = true
}
</script>

<style scoped>
.container {
    width: 50%;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
}

.oreder_text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.oreder_text div {
    margin: 6px 0;

}

.box-card {
    margin: 20px 0;
}
</style>